<template>
  <div class="contents-container">
    <div class="search-area">
      <el-button size="mini" class="ml-15" type="success" @click="resetTemp">新增流程</el-button>
    </div>
    <!-- 列表 -->
    <el-table v-loading="listLoading" :data="listData" border fit highlight-current-row style="width: 100%;">
      <el-table-column label="流程名称" align="center" width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.flowName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="流程内容" align="center">
        <template slot-scope="scope">
          <span v-for="(item,index) in scope.row.phaselist" :key="index">{{ item.phaseName }},</span>
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center" width="300">
        <template slot-scope="scope">
          <span>{{ scope.row.remark }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="180" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDeleted(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增/修改 -->
    <PopWindow v-show="showForm" :title="title" :mode="modeValue" @close="closeForm" @addHandle="addHandle" @updateHandle="updateHandle">
      <el-form ref="addForm" :model="formData" label-width="100px" size="small" :rules="formDataRules">
        <el-form-item label="流程名称" prop="flowName">
          <el-input v-model="formData.flowName" class="my-input" />
        </el-form-item>
        <el-form-item label="流程备注" prop="remark">
          <el-input v-model="formData.remark" class="my-input" />
        </el-form-item>
        <el-form-item
          v-for="(item, index) in formData.phaselist"
          :key="index"
          :label="'阶段' + (index + 1)"
          :prop="'phaselist.' + index + '.phaseName'"
          :rules="{
            required: true, message: '请选择阶段', trigger: 'blur'
          }"
        >
          <el-select v-model="item.phaseName">
            <el-option v-for="i in stageList" :key="i.phaseRank" :label="i.phaseName" :value="i.phaseName" />
          </el-select>
        </el-form-item>

        <el-button @click="addDomain">增加阶段</el-button>
      </el-form>

    </PopWindow>
    <pagination
      v-show="total > 0"
      :total="total"
      :page-index.sync="listQuery.page"
      :page-size.sync="listQuery.limit"
      @pagination="getListData"
    />
  </div>
</template>

<script>
import {
  addFlow,
  editFlow,
  deleteFlow,
  getFlowList,
  getFlowDetail
} from '@/api/proFlow'
import {
  getStageSelect
} from '@/api/common'
import Pagination from '@/components/Pagination'
import PopWindow from '@/components/PopWindow'
export default {
  name: 'Flow',
  components: {
    Pagination,
    PopWindow
  },
  data() {
    return {
      listLoading: false,
      total: 1, // 总数
      listData: [],
      listQuery: {
        page: 1, // 当前页码
        limit: 10 // 每页数量
      },
      stageList: [],
      showForm: false, // 新增修改弹窗显示否
      dialogStatus: '', // 弹窗状态
      title: '新增流程',
      modeValue: 'add',
      formData: {
        flowName: '',
        remark: '',
        phaselist: [{
          phaseName: '',
          phaseRank: ''
        }]
      },
      // 表单验证规则
      formDataRules: {
        flowName: [{
          required: true,
          message: '请输入流程名称',
          trigger: 'blur'
        },
        {
          max: 100,
          message: '流程名称100个字内',
          trigger: 'blur'
        }
        ],
        remark: {
          max: 200,
          message: '备注200个字内',
          trigger: 'blur'
        }
      }
    }
  },
  watch: {
    'formData.phaselist': {
      handler() {
        const that = this
        that.formData.phaselist.forEach(item => {
          that.stageList.forEach(i => {
            if (i.phaseName == item.phaseName) {
              that.$set(item, 'phaseRank', i.phaseRank)
            }
          })
        })
      },
      deep: true
    }

  },
  mounted() {
    this.getListData()
    this.getSelect()
  },
  methods: {
    getListData(page) {
      // 列表初始数据
      const that = this
      that.$loadings()
      that.listQuery.page = page || 1
      getFlowList(that.listQuery).then((res) => {
        that.$loadings().close()
        that.listData = res.data
        that.page = page
        that.total = res.count
      }).catch(() => {
        that.$loadings().close()
      })
    },
    getSelect() {
      // 下拉框数据
      getStageSelect({}).then((res) => {
        this.stageList = res.data
      }).catch(() => {})
    },
    addDomain() {
      this.formData.phaselist.push({
        phaseName: '',
        phaseRank: ''
      })
    },
    resetTemp() {
      this.title = '新增流程'
      this.modeValue = 'add'
      this.formData = {
        flowName: '',
        remark: '',
        phaselist: [{
          phaseName: '',
          phaseRank: ''
        }]
      }
      this.showForm = true
    },
    updateHandle() {
      var that = this
      that.$refs.addForm.validate(valid => {
        if (valid) {
          that.$loadings()
          editFlow(that.formData)
            .then(data => {
              that.$loadings().close()
              that.$message({
                type: 'success',
                message: '修改成功!'
              })
              that.getListData()
              that.closeForm() // 重置表单
            })
            .catch(() => {
              that.$loadings().close()
            })
        } else {
          return false
        }
      })
      this.showForm = false
    },
    addHandle() {
      var that = this
      that.$refs.addForm.validate(valid => {
        if (valid) {
          that.$loadings()
          addFlow(that.formData)
            .then(data => {
              that.$loadings().close()
              that.$message({
                type: 'success',
                message: '添加成功!'
              })
              that.getListData()
              that.closeForm() // 重置表单
            })
            .catch(() => {
              that.$loadings().close()
            })
        } else {
          return false
        }
      })
      this.showForm = false
    },
    closeForm() {
      if (this.$refs.formData) {
        this.$refs.formData.resetFields()
      }
      this.showForm = false
    },
    handleEdit(val) {
      this.formData.flowName = val.flowName
      this.formData.remark = val.remark
      this.formData.phaselist = val.phaselist
      this.formData.flowId = val.flowId
      this.title = '修改流程'
      this.modeValue = 'edit'
      this.showForm = true
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
